<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { showToast } from "vant";

// 定义属性
const props = defineProps({
  // 商品数据
  product: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

// 路由实例
const router = useRouter();

// 图片加载状态
const imageLoaded = ref(true);
const imageError = ref(false);

// 处理图片加载错误
const handleImageError = () => {
  imageError.value = true;
  imageLoaded.value = true;
};

// 处理图片加载开始
const handleImageLoading = () => {
  imageLoaded.value = false;
};

// 处理图片加载完成
const handleImageLoaded = () => {
  imageLoaded.value = true;
};

// 格式化价格
const formatPrice = (price) => {
  // 确保价格是数字
  const numericPrice = typeof price === 'string' ? parseFloat(price) : price
  return Number(numericPrice).toFixed(2);
};

// 处理点击事件
const handleClick = () => {
  console.log('点击商品，商品信息:', props.product);
  if (props.product.id) {
    router.push(`/product/${props.product.id}`);
  } else {
    showToast('商品信息不完整');
  }
};
</script>

<template>
  <div class="product-card" @click="handleClick">
    <!-- 商品图片 -->
    <div class="product-image">
      <img v-if="!imageError" :src="product.image_url" :alt="product.title" @error="handleImageError"
        @load="handleImageLoaded" @loadstart="handleImageLoading" />
      <!-- 占位图 -->
      <div v-if="imageError" class="placeholder-image">
        <van-icon name="photo-o" size="36" />
        <span>图片无法显示</span>
      </div>
      <!-- 加载中 -->
      <div v-if="!imageLoaded && !imageError" class="image-loading">
        <van-loading type="spinner" color="var(--van-primary-color)" />
      </div>
      <div class="product-tag" v-if="product.tag">{{ product.tag }}</div>
    </div>

    <!-- 商品信息 -->
    <div class="product-info">
      <h3 class="product-title">{{ product.name }}</h3>
      <p class="product-desc" v-if="product.description">
        {{ product.description }}
      </p >

      <!-- 商品价格 -->
      <div class="product-price">
        <span class="price-current">¥{{ formatPrice(product.price) }}</span>
        <span class="price-original" v-if="product.originalPrice">¥{{ formatPrice(product.originalPrice) }}</span>
      </div>

      <!-- 商品销量 -->
      <div class="product-sales" v-if="product.sales">
        已售 {{ product.sales }}+
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.product-card {
  background-color: #fff;
  border-radius: var(--van-radius-md, 8px);
  overflow: hidden;
  box-shadow: var(--van-shadow-1);
  transition: transform 0.3s, box-shadow 0.3s;
  margin-bottom: 12px;

  &:active {
    transform: translateY(2px);
    box-shadow: var(--van-shadow-1);
  }
}

.product-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.product-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: var(--van-primary-color);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.product-info {
  padding: 12px;
}

.product-title {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--van-text-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.product-desc {
  font-size: 12px;
  color: var(--van-text-color-2);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price {
  display: flex;
  align-items: baseline;
  margin-bottom: 4px;
}

.price-current {
  font-size: 16px;
  font-weight: 500;
  color: var(--van-primary-color);
}

.price-original {
  font-size: 12px;
  color: var(--van-text-color-3);
  text-decoration: line-through;
  margin-left: 6px;
}

.product-sales {
  font-size: 12px;
  color: var(--van-text-color-3);
}

.placeholder-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f7f8fa;
  color: var(--van-text-color-3);

  span {
    font-size: 12px;
    margin-top: 8px;
  }
}

.image-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f8fa;
}
</style>